import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd';

const UserModalList = forwardRef((props, ref) => {
  const [isDisabled, setisDisabled] = useState(false)
  const { roleId, region } = JSON.parse(localStorage.getItem('token'))

  useEffect(() => {
    setisDisabled(props.dadDisabled)
  }, [props.dadDisabled])

  // 对话框角色选择
  const roleChange = (value) => {
    if (value === 1) {
      setisDisabled(true)
      // 选择超级管理员后将区域值设成空
      ref.current.setFieldValue('region', '')
    } else {
      setisDisabled(false)
    }
  }
  // 区域编辑的区域选择禁用
  const checkDisabled = (item) => {
    // 更新用户 
    if (props.isUpdate) {
      if (roleId === 1) {
        return false
      } else {
        return true
      }
    } else {
      // 添加用户
      if (roleId === 1) {
        return false
      } else {
        return item.value !== region
      }
    }
  }

  // 角色编辑的角色选择禁用
  const checkRoleDisabled = (item) => {
    // 更新用户 
    if (props.isUpdate) {
      if (roleId === 1) {
        return false
      } else {
        return true
      }
    } else {
      // 添加用户
      if (roleId === 1) {
        return false
      } else {
        return item.roleName !== '区域编辑'
      }
    }
  }
  // 区域选择处理
  const regionNewList = () => {
    const arr = props.regionList.map(item => {
      return {
        value: item.value,
        label: item.title,
        disabled: checkDisabled(item)
      }
    })
    return arr
  }

  // 角色选择处理
  const rowNewList = () => {
    const arr = props.roleList.map(item => {
      return {
        label: item.roleName,
        value: item.id,
        disabled: checkRoleDisabled(item)
      }
    })
    return arr
  }
  return (
    <Form
      layout="vertical"
      ref={ref}
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={isDisabled ? '' : [
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Select
          style={{
            width: 120,
          }}
          options={regionNewList()}
          disabled={isDisabled}
        />
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Select
          style={{
            width: 120,
          }}
          onChange={roleChange}
          options={rowNewList()}
        />
      </Form.Item>
    </Form>
  )
})


export default UserModalList